<template>
	<n-scrollbar>
		<div class="flex gap-[5px] justify-between mb-4">
			<div
				v-for="item in list"
				:key="item.currency"
				class="flex items-center h-7 gap-1 app-bg-react px-[10px] border border-bg-4 rounded-lg bg-bg-3"
				:class="{ '!border-primary !bg-[#7864FF4D]': props.currency === item.currency }"
				@click="onClickItem(item)">
				<base-currency :currency="item.currency" />
				<span>{{ item.appName || item.currency }}</span>
			</div>
			<div
				class="flex items-center h-7 gap-1 app-bg-react px-[10px] border border-bg-4 rounded-lg bg-bg-3"
				@click.stop="emits('click:more')">
				<span>{{ $t('wallet.more') }}</span>
				<div class="relative flex pl-2">
					<base-currency
						v-for="(item, index) in walletStore.balanceList.slice(count, count + 3)"
						:key="item.currency"
						:currency="item.currency"
						class="-ml-2"
						:style="{ 'z-index': 100 - index }" />
				</div>
				<base-icon name="go" size="16" />
			</div>
		</div>
	</n-scrollbar>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import { find } from 'lodash-es'
import { useWalletStore } from '@/store'
import { BaseCurrency, BaseIcon } from '@/components/base'
import { CurrencyEnum } from '@/enums'
import { NScrollbar } from 'naive-ui'
import { isDesktop } from '@/hooks'
import { router } from '@/router'
import { BalanceItem } from '@/types'

defineOptions({ name: 'WalletRecentlyCurrency' })

const props = defineProps({
	currency: { type: String as PropType<CurrencyEnum | ''> }
})
const emits = defineEmits(['update:currency', 'click:more'])

const walletStore = useWalletStore()
const count = computed(() => (isDesktop.value ? 4 : 3))
const list = computed(() => {
	const currencyList = [...walletStore.balanceList]
	return walletStore.walletConfig.sortedCurrency
		.map((currency) => <BalanceItem>find(currencyList, { currency }))
		.filter((i) => i)
		.slice(0, count.value)
})

const onClickItem = (item: BalanceItem) => {
	router.replace({
		query: {
			tab: item.assetType === 2 ? 'fiat' : 'crypto',
			modal: 'wallet-deposit',
			currency: item.currency
		}
	})
	emits('update:currency', item.currency)
}
</script>

<style scoped></style>
